﻿@model  List<Dyd.BaseService.ServiceCenter.Web.Models.TimeChartModel>
@{
    ViewBag.Title = "节点监控报表";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
}
@Html.AntiForgeryToken()
<div class="main_content">
    <div class="top">
        <h3>@ViewBag.Title</h3>
    </div>
    <div class="main">
        @using (Html.BeginForm("NodeReportIndex", "NodeReport", FormMethod.Post))
        {
            <div class="pt10">
                <label>节点id</label>
                <input value="@ViewBag.nodeid" type="text" name="nodeid" id="nodeid" style="width:150px;" maxlength="15" />
                <label>时间</label>
                <input value="@ViewBag.BeginDate" type="text" name="queryDay" id="queryDay" style="width:150px;" onclick="WdatePicker()" maxlength="15" />
                <label>类型</label>
                <select name="datatype">
                    <option value="avg" @(ViewBag.datatype + "" == "avg" ? "selected='selected'" : "")>平均</option>
                    <option value="max" @(ViewBag.datatype + "" == "max" ? "selected='selected'" : "")>最大</option>
                    <option value="min" @(ViewBag.datatype + "" == "min" ? "selected='selected'" : "")>最小</option>
                </select>
                <input type="submit" class="btn" value="搜索" onclick="return search();" accesskey="S" />
            </div>
            <div class="pt10">
                <label>显示</label>
                <input type="checkbox" onclick="chooseAll(this); " value='' />
                <input type="hidden" name="columns" id="columns" value="@ViewBag.columns" />
                <input type="checkbox" value="processcpuper" />cpu占用
                <input type="checkbox" value="memorysize" />内存占用
                <input type="checkbox" value="processthreadcount" />线程数
                <input type="checkbox" value="visitcount" />访问次数
                <input type="checkbox" value="connectioncount" />当前连接数
                <input type="checkbox" value="errorcount" />错误数量
            </div>
        }
    </div>

    <div id="ajaxList" class="m10">
    </div>

    <div>
        @foreach (var m in Model)
        {
            <div id="container@(m.Key)" style="width:48%;height:400px; float:left"></div>
        }
    </div>
</div>
@section Scripts{
    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="~/Content/js/chart.js"></script>
    <script>
        $(function () {
            $("[type='checkbox']").each(function (i) {
                if ($('#columns').val().indexOf($(this).val()) > -1 && $(this).val() != '') {
                    $(this).attr("checked", true);
                }
            });
        });

        function chooseAll(item) {
            if ($(item).attr("checked")) {
                $("[type='checkbox']").attr("checked", true);
            }
            else
                $("[type='checkbox']").attr("checked", false);
        }

        function search() {
            var choosed = '';
            $("[type='checkbox']").each(function (i) {
                if ($(this).attr("checked") && $(this).val() != '') {
                    choosed += $(this).val() + ',';
                }
            });
            $("#columns").val(choosed);
            return true;
        }
        $(function () {
            Highcharts.setOptions({
                global: {
                    useUTC: true
                }
            })

            @foreach (var m in Model)
          {
              var c = @"$('#container'+'{key}').highcharts({
            chart: {
                zoomType: 'x',
                spacingRight: 20
            },
            title: {
                text: '{title}'
            },
            credits : {
                enabled:false//不显示highCharts版权信息
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                    '{subtitle}' :
                    'Pinch the chart to zoom in'
            },
            xAxis: {
                type: 'datetime',
                maxZoom: {maxzoom}, // fourteen days
                //tickInterval:60*60*1000,
                //max:Date.UTC({enddate}),
                dateTimeLabelFormats:{day: '%b月%e日',month: '%y年%b月' ,year: '%Y'},
                title: {
                    text: null
                }
            },
            yAxis: {
                title: {
                    text: '{ytitle}'
                }
            },
            tooltip: {
                shared: true
            },
            legend: {
                enabled: false
            },
            plotOptions: plotOptions1,

            series: [{
                type: 'area',
                name: '{unittext}',
                pointInterval:  {pointinterval},
                pointStart: Date.UTC({startdate}),
                data: {datajson}
            }]
        });".Replace("{key}", m.Key).Replace("{title}", m.Title).Replace("{subtitle}", m.SubTitle)
                  .Replace("{datajson}", m.DataJson).Replace("{ytitle}", m.YTitle)
                  .Replace("{startdate}", m.StartDate.ToString("yyyy,MM,dd"))
                  .Replace("{unittext}", m.UnitText)
                  .Replace("{maxzoom}", m.MaxZoom)
                  .Replace("{pointinterval}", m.PointInterval)
                  .Replace("{enddate}", m.EndDate.ToString("yyyy,MM,dd"));
        @Html.Raw(c)
          }
        });

    </script>

}

@section footerScripts{
}